<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="es">
        <head>
                <title>iApuntes - Registro</title>
                <link rel="stylesheets" type="text/css" href="style/styleFormulary.css" />
                
                <link href="img/favicon.ico" rel="shortcut icon" />
                <meta name="author" content="Patricia Raigada" />
                </head>
        <body>
                <!-- Header -->
                <div id="div_header">
                        <img id="img_header" src="img/iapuntes.jpg" alt="iApuntes" />
                </div>
                <div id="div_info">
                        <p id="info_text" class="hint">
                                * Todos los campos son obligatorios
                        </p>
                </div>
                <div id="div_form">
                        
                                <!-- datos de registro -->
                                <div id="div_registro">
                                        <fieldset>
                                                <legend>
                                                        Registro
                                                </legend>
                                                <!-- user -->
                                                <div id="div_user">
                                                        <label id="label_user" for="user">Usuario:</label>
                                                        <input id="user" name="user" type="text" onFocus="blur" />
                                                        <label id="user_hint" class="hint">Cuatro caracteres como m&#237;nimo</label>
                                                </div>
                                                <!-- password -->
                                                <div id="div_password">
                                                        <label id="label_password" for="password">Contrase&ntilde;a:</label>
                                                        <input id="password" name="password" type="password" onFocus="blur" />
                                                        <label id="password_hint" class="hint">Seis caracteres como m&#237;nimo</label>
                                                </div>
                                                <!-- repetir password -->
                                                <div id="div_password2">
                                                        <label id="label_password2" for="password2">Repetir Contrase&ntilde;a:</label>
                                                        <input id="password2" name="password2" type="password" onFocus="blur" />
                                                </div>
                                        </fieldset>
                                </div>
                                <!-- Datos personales -->
                                <div id="div_datos_personales">
                                        <fieldset>
                                                <legend>
                                                        Datos personales
                                                </legend>
                                                <!-- DNI -->
                                                <div id="div_dni">
                                                        <label id="label_dni" for="dni">D.N.I.:</label>
                                                        <input id="dni" name="dni" type="text" onFocus="blur" maxlength="8" onKeypress="if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;"/>
                                                        -
                                                        <input id="letra" name="letra" type="text" maxlength="1" onFocus="blur" onChange="javascript:this.value=this.value.toUpperCase();"/>
                                                </div>
                                                <!-- Elecci&#243;n del sexo -->
                                                <div id="div_sexo">
                                                        <div id="div_titulo_sexo">
                                                                Sexo:
                                                        </div>
                                                        <div id="div_sexo_hombre">
                                                                <input id="sexo_hombre" name="sexo" type="radio" value="H"/>
                                                                <label id="label_hombre" for="sexo_hombre">Hombre</label>
                                                        </div>
                                                        <div id="div_sexo_mujer">
                                                                <input id="sexo_mujer" name="sexo" type="radio" value="M"/>
                                                                <label id="label_mujer" for="sexo_mujer">Mujer</label>
                                                        </div>
                                                </div>
                                                <!-- Nombre -->
                                                <div id="div_nombre">
                                                        <label id="label_nombre" for="nombre">Nombre:</label>
                                                        <input id="nombre" name="nombre" type="text" onFocus="blur" />
                                                        <label id="nombre_hint" class="hint">Tu nombre de pila</label>
                                                </div>
                                                <!-- Apellidos -->
                                                <div id="div_apellidos">
                                                        <label id="label_apellidos" for="apellidos">Apellidos:</label>
                                                        <input id="apellidos" name="apellidos" type="text" onFocus="blur" />
                                                </div>
                                                <!--Email-->
                                                <div id="div_email">
                                                        <label id="label_email" for="email">Email:</label>
                                                        <input id="email" name="email" type="text" onFocus="blur" />
                                                        <label id="email_hint" class="hint">Debe ser una direcci&#243;n v&#225;lida</label>
                                                </div>
                                                <!--Fecha nacimiento-->
                                                <div id="div_fechanacimiento">
                                                        <label id="label_datepicker" for="datepicker">Fecha nac.:</label>
                                                        <input type="text" name="datepicker" id="datepicker" size="12" onFocus="blur" />
                                                        <label id="user_hint" class="hint">Comprobaci&#243;n de edad</label>
                                                </div>
                                        </fieldset>
                                </div>
                                <!-- Fin de los datos personales -->
                                <!-- Direcci&#243;n (calle, n&#250;mero y provincia) -->
                                <div id="div_direccion">
                                        <fieldset>
                                                <legend>
                                                        Direcci&#243;n
                                                </legend>
                                                <div id="div_calle">
                                                        <label id="label_calle" for="calle">Calle/Avda.:</label>
                                                        <input id="calle" name="calle" type="text" onFocus="blur" />
                                                </div>
                                                <div id="div_poblacion">
                                                        <label id="label_poblacion" for="poblacion">Poblaci&#243;n:</label>
                                                        <input id="poblacion" name="poblacion" type="text" onFocus="blur" />
                                                </div>
                                                <div id="div_provincia">
                                                        <label id="label_provincia" for="provincia">Provincia:</label>
                                                        <select id="provincia" name="provincia" onFocus="blur">
                                                                <optgroup label="Andaluc&#237;a">
                                                                        <option>Sevilla</option>
                                                                        <option>Almer&#237;a</option>
                                                                        <option>C&#225;diz</option>
                                                                        <option>C&#243;rdoba</option>
                                                                        <option>Granada</option>
                                                                        <option>Huelva</option>
                                                                        <option>Ja&#233;n</option>
                                                                        <option>M&#225;laga</option>
                                                                </optgroup>
                                                                <optgroup label="Extremadura">
                                                                        <option>Badajoz</option>
                                                                        <option>C&#225;ceres</option>
                                                                </optgroup>
                                                        </select>
                                                </div>
                                        </fieldset>
                                </div>
                                <div id="div_acepto">
                                        <input id="acepto" name="acepto" type="checkbox" onFocus="blur" />
                                        <label id="label_acepto" for="acepto">He le&#237;do y acepto las <a href="legalnote.html">condiciones generales y la pol&#237;tica de privacidad</a></label>
                                </div>
                                <div id="div_submit">
                                        <button id="submit">
                                                Enviar
                                        </button>
                                </div>
                        </form>
                </div>
                <br/>
                
        </body>
</html>